<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider :theme="sideTheme" v-model="collapsed" :trigger="null" collapsible>
      <div :class="['logo', sideTheme]">
        logo区域
      </div>
      <a-menu :theme="sideTheme" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span>系统管理</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span>用户管理</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span>角色管理</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="admin-header" style="padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 0 24px 16px', background: '#fff', minHeight: '280px' }"
      >
        <Home></Home>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
import Home from '@/views/Home'
export default {
  name: "BasicLayout",
  data() {
    return {
      collapsed: false,
    };
  },
  computed: {
    sideTheme() {
      return this.theme.mode == 'light' ? this.theme.mode : 'dark'
    },
    ...mapState('setting', ['theme'])
  },
  components: {
    Home
  }
};
</script>

<style lang="less" scoped>
#components-layout-demo-custom-trigger {
  height: 100vh;
}
#components-layout-demo-custom-trigger {
  .admin-header {
    background: #ffffff;
  }
  /deep/.trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  /deep/.trigger:hover {
    color: #1890ff;
  }
  /deep/.logo {
    text-align: center;
    color: #ffffff;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
    &.light {
      color: #414141;
    }
  }
}
</style>
